import {Radio, message } from 'antd';
import React, {
  useState,
  useRef,
  useEffect
} from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import type {
  ProColumns,
  ActionType
} from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { getClassroomListV1, checkAuthority, getClassroomList } from './service';
import moment from 'moment';
const TableList: React.FC<{}> = (props: any) => {

  const actionRef = useRef<ActionType>();
  const [curRadio,setCurRadio] = useState(0)
  const [teacherType,setTeacherType] = useState(0)
  const [type,setType] = useState(0)
  const checkTime = (startTime, endTime) => {
    if (
      moment(endTime).format('YYYY-MM-DD HH:mm:ss') < moment(startTime).format('YYYY-MM-DD HH:mm:ss')
    ) {
      message.error('结束时间不能早于开始时间');
      return false;
    }
    return true;
  };
  const columns_1: ProColumns<{}>[] = [
    {
      title:'id',
      dataIndex: 'classroomId',
      hideInSearch:true
    },
    {
      title: '课堂名称',
      dataIndex: 'classroomName',
    },
    {
      title:'课堂类型',
      dataIndex:'classroomTypeDesc',
      hideInSearch:true
    },
    {
      title: '课程开始时间',
      dataIndex: 'startTime',
      valueType: 'dateTime',
      hideInTable: true,
    },
    {
      title: '课程结束时间',
      dataIndex: 'endTime',
      valueType: 'dateTime',
      hideInTable: true,
    },
    {
      title: '上课时间',
      dataIndex: 'startTime',
      hideInSearch:true
    },
    {
      title:'课程状态',
      dataIndex:'status',
      valueEnum:{
        '0':'未开始',
        '1':'进行中',
        '3':'已结束'
      }
    },
    {
      title: '课堂状态',
      dataIndex: 'statusDesc',
      hideInSearch:true
    },
    {
      title: '操作',
      dataIndex: 'classroomId',
      hideInSearch:true,
      render:(classroomId,record)=> {
        return (
          <>
          {/*
            https://yapi.iqidao.com/mock/19/queryUserRoleAtActivity/huanXin/chatGroup/
            userId
            activityId
            角色类型，0无角色，1主讲老师，2辅导老师，3辅导+主讲老师
           */}
            {
               teacherType === 0 &&
               <a
               onClick={async ()=>{
                // 0无角色，1主讲老师，2辅导老师，3辅导+主讲老师
                const res = await checkAuthority(record.activityId,localStorage.getItem('uid'))
                const roleAuth = res.result
                if(roleAuth === 1 || roleAuth === 3){
                 window.open(`/web/classroom/?id=${classroomId}`,'_blank')
                } else {
                  message.error('只有主讲老师才可以进入')
                }
               }}
                style={{"marginRight":"20px"}}>进入 </a>
            }
            {
               teacherType === 0  &&
               <a
               onClick={async()=>{
                 // 0无角色，1主讲老师，2辅导老师，3辅导+主讲老师
                 const res = await checkAuthority(record.activityId,localStorage.getItem('uid'))
                 const roleAuth = res.result
                 if(roleAuth === 1 || roleAuth === 3){
                   window.open(`/web/control/control/${classroomId}`,'_blank')
                 } else {
                   message.error('只有主讲老师才可以进入')
                 }
               }}
               style={{"marginRight":"20px"}}
             >
               教师控制页
             </a>
            }

            {
              teacherType === 0 &&
              <a target="_blank"  style={{"marginRight":"20px"}} href={`/web/app-admin/activity/course-ware/${classroomId}`} rel="noreferrer">课件</a>
            }

            {
              teacherType === 1 &&
              <a
              onClick={async ()=>{
               // 0无角色，1主讲老师，2辅导老师，3辅导+主讲老师
               const res = await checkAuthority(record.activityId,localStorage.getItem('uid'))
                 const roleAuth = res.result
               if(roleAuth === 2 || roleAuth === 3){
                window.open(`/web/control/chatroom/${classroomId}`,'_blank')
               } else {
                 message.error('只有辅导老师才可以进入')
               }

              }}
            >
              进入
            </a>
            }

          </>
        )
      }
    },
  ];
  const columns_2: ProColumns<{}>[] = [
    {
      title: 'id',
      dataIndex: 'classroomId',
      hideInSearch: true
    },
    {
      title: '条目名称',
      dataIndex: 'classroomName',
      hideInSearch: true
    },
    {
      title: '课堂名称',
      dataIndex: 'classroomName',
      hideInTable: true
    },
    {
      title: '课程开始时间',
      dataIndex: 'startTime',
      valueType: 'dateTime',
      hideInTable: true,
    },
    {
      title: '课程结束时间',
      dataIndex: 'endTime',
      valueType: 'dateTime',
      hideInTable: true,
    },
    {
      title: '类型',
      dataIndex: 'classroomTypeDesc',
      hideInSearch: true
    },
    {
      title: '开始时间',
      dataIndex: 'startTime',
      hideInSearch: true
    },
    {
      title:'课程状态',
      dataIndex:'status',
      hideInTable: true,
      valueEnum:{
        '0':'未开始',
        '1':'进行中',
        '3':'已结束'
      }
    },
    {
      title: '课程状态',
      dataIndex: 'statusDesc',
      hideInSearch: true
    },
    {
      title: '操作',
      hideInSearch: true,
      render: (text, record) => (
       [
        <a
          key="1"
          target="_blank"
          href={`/web/app-admin/activity/course-ware/${record.classroomId}`}
          rel="noreferrer"
          style={{
            marginRight:'30px'
          }}
        >
        课件
       </a>,
        <a
          key="2"
          onClick={() => {
            // store('classroomId', record.classroomId);
            // store('classroomName', record.classroomName);
            // storeElectron.set('recordType', 'class');
            // window.location.hash = 'pre-classroom';
            if(window.electron){
              window.electron.ipcRenderer.openClass({
                classroomId:record.classroomId,
                classroomName:record.classroomName
              })
            } else {
              message.error('web端无法进入三分屏课堂')
            }
          }}
          >
        进入
        </a>
       ]
      ),
    },
  ]
  useEffect(() => {
    actionRef.current?.reload();
  },[teacherType,type])
  return (
    <PageContainer>
        <Radio.Group onChange={(e)=>{setCurRadio(e.target.value)}} value={curRadio} style={{ marginBottom: 16 }}>
          <Radio.Button key={0} value={0}
            onClick={()=>{
              setTeacherType(0)
              setType(0)
            }}>
              主讲-站立式
          </Radio.Button>
          <Radio.Button key={2}  value={2}
            onClick={()=>{
              setTeacherType(1)
              setType(0)
            }}>
              辅导-站立式
          </Radio.Button>
          <Radio.Button key={3} value={3}
            onClick={()=>{
              setTeacherType(0)
              setType(6)
            }}>
              主讲-分屏
          </Radio.Button>
          <Radio.Button key={1} value={1}
            onClick={()=>{
              setTeacherType(1)
              setType(6)
            }}>
              辅导-分屏
          </Radio.Button>
        </Radio.Group>
      <ProTable<{}>
        headerTitle="数据列表"
        actionRef={actionRef}
        rowKey="key"
        request={async params => {

          let msg
          if( curRadio === 3){
            msg =  await getClassroomList({
              ...params,
              pageNo: params.current,
            })
          } else {
            msg =  await getClassroomListV1({
              ...params,
              type,
              teacherType,
              uid:localStorage.getItem('uid'),
              pageNo: params.current
            })
          }


          return {
            data: msg.data.records,
            success: true,
            total: msg.data.total
          }
        }}
        search={{
          collapsed: false,
          labelWidth: 'auto',
        }}
        columns={ curRadio === 3 ? columns_2 : columns_1}
        beforeSearchSubmit={(params) => {
          if (
            params.startTime &&
            params.endTime &&
            !checkTime(params.startTime, params.endTime)
          ) {
            return {};
          } else {
            return params;
          }
        }}
      />

    </PageContainer>
  );
};

export default TableList;
